<template>
  <view class="content">
    <uni-swiper-dot
      class="uni-swiper-dot-box"
      @clickItem="clickItem"
      :info="info"
      :current="current"
      :mode="mode"
      field="content"
    >
      <swiper class="swiper-box" @change="change" :current="swiperDotIndex">
        <swiper-item v-for="(item, index) in bannerLists" :key="index">
          <view class="swiper-item" :class="'swiper-item' + index">
            <image :src="item.src" alt="" mode="'scaleToFill'" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const info = ref([])
const current = ref(1)
const mode = ref()
const swiperDotIndex = ref(0)
const bannerLists = ref([
  {
    src: 'https://img-blog.csdnimg.cn/img_convert/e0020476661c18a91062e3508e840bb0.png',
  },
  {
    src: 'https://5b0988e595225.cdn.sohucs.com/images/20200416/1f5f16d49a81421ab7cd82d40b02f197.jpeg',
  },
  {
    src: 'https://img.91huoke.com/xxfl/hk91/customer/34483/yQ6USGd4kaBB7fEZop7HAM1eI0yKDVKUOevrNjhm.jpeg',
  },
])

const clickItem = () => {}
const change = () => {}
</script>
